<template>
	<div style="height: 400px" ref="homeLineRef"></div>
</template>

<script setup name="LINE">
import * as echarts from 'echarts';

const props = defineProps({
	line_x: {
		type: Array,
		default: () => [],
	},
	lineData: {
		type: Array,
		default: () => [],
	},
});
// 引入组件
const homeLineRef = ref();
let line;
//柱状图
const initLineChart = () => {
	line = markRaw(echarts.init(homeLineRef.value, ''));
	var getname = props.line_x;
	var getvalue = props.lineData;
	var data = [];
	for (var i = 0; i < getname.length; i++) {
		data.push({ name: getname[i], value: getvalue[i] });
	}
	const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8', '#E790E1', '#E790E0'];
	const option = {
		backgroundColor: '',
		title: {
			text: '',
			x: 'left',
			textStyle: { fontSize: '15', color: '' },
		},
		toolbox: {
			show: true,
			feature: {
				mark: { show: true },
				dataView: { show: true, readOnly: false },
				restore: { show: true },
				saveAsImage: { show: true },
			},
		},
		tooltip: { trigger: 'item' },

		legend: {
			type: 'scroll',
			orient: 'vertical',
			right: '0%',
			left: '65%',
			top: 'center',
			itemWidth: 14,
			itemHeight: 14,
			data: getname,
			textStyle: {
				rich: {
					name: {
						fontSize: 14,
						fontWeight: 400,
						width: 200,
						height: 35,
						padding: [0, 0, 0, 60],
						color: '',
					},
					rate: {
						fontSize: 15,
						fontWeight: 500,
						height: 35,
						width: 40,
						padding: [0, 0, 0, 30],
						color: '',
					},
				},
			},
		},
		series: [
			{
				type: 'pie',
				radius: ['82', '102'],
				center: ['32%', '50%'],
				itemStyle: {
					color: function (params) {
						return colorList[params.dataIndex];
					},
				},
				label: { show: true },
				labelLine: { show: true },
				data: data,
			},
		],
	};
	line.setOption(option);
};

onMounted(() => {
	initLineChart();
});
</script>
